<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/classification.css">
    <title>Document</title>
</head>
<body>
    <div class="warp">
        <header>
             <!-- 头部上部分 -->
             <div class="header_top">
                <!-- 返回按钮 -->
                <button class="back_btn"><a href="#">back</a></button>
                <!-- 页面标题文字 -->
                <p class="head_name">发现</p>
                <!-- 右侧城市下拉框 -->
                <div class="city_box">
                    <select name="城市" id="">
                    <option value="广东省">广州市</option>
                    <option value="广东省">深圳市</option>
                    <option value="广东省">清远市</option>
                    <option value="广东省">东莞市</option>
                    </select>
                    <i class="iconfont icon-xialajiantou drop_icon"></i>
            </div>
                </div>
                <!-- 头部中部区域 -->
                <div class="header_mid">
                    <div class="header_navbox"><img src="./img/classification/meishi_radius.png" alt=""><p>美食</p></div>
                    <div class="header_navbox"><img src="./img/classification/movie_radius.png" alt=""><p>电影</p></div>
                    <div class="header_navbox"><img src="./img/classification/sport_radius.png" alt=""><p>运动</p></div>
                    <div class="header_navbox"><img src="./img/classification/sing_radius.png" alt=""><p>唱歌</p></div>
                </div>
                <div class="header_botm">
                    <div class="process_radius"></div>
                    <div class="process_radius"></div>
                    <div class="process_radius"></div>
                    <div class="process_radius"></div>
                </div>
        </header>
        <main>
            <!-- 美食区 -->
            <div class="main_cont">
                <!-- 内容头部标题 -->
                <div class="infotitle">
                    <div class="infotitle_left"><img src="./img/classification/cake_logo.png" alt=""><span>热门搜索</span></div>
                    <div class="infotitle_right">
                        <a href="#">
                        <span>更多</span>
                        <!-- 右箭头 -->
                        <i class="iconfont icon-youjiantou_huaban right_icon"></i>
                        </a>
                </div>
            </div>
            <!-- 内容图片区域 -->
                <div class="main_cont_list">
                     <div class="cont_lsit_box"><img src="./img/classification/sousi1.png" alt=""></div>
                     <div class="cont_lsit_box"><img src="./img/classification/sousi2.png" alt=""></div>
                     <div class="cont_lsit_box"><img src="./img/classification/sousi3.png" alt=""></div>
                     <div class="cont_lsit_box"><img src="./img/classification/sousi4.png" alt=""></div>
                </div>
            </div>
            <!-- 运动区 -->
            <div class="main_cont">
                <!-- 内容头部标题 -->
                <div class="infotitle">
                    <div class="infotitle_left"><img src="./img/classification/sport_logo.png" alt=""><span>热门搜索</span></div>
                    <div class="infotitle_right">
                        <a href="#">
                        <span>更多</span>
                        <!-- 右箭头 -->
                        <i class="iconfont icon-youjiantou_huaban right_icon"></i>
                        </a>
                </div>
            </div>
            <!-- 内容图片区域 -->
                <div class="main_cont_list">
                     <div class="cont_lsit_box"><img src="./img/classification/badminton.png" alt=""></div>
                     <div class="cont_lsit_box"><img src="./img/classification/swimming.png" alt=""></div>
                     <div class="cont_lsit_box"><img src="./img/classification/Tennis.png" alt=""></div>
                     <div class="cont_lsit_box"><img src="./img/classification/Volleyball.png" alt=""></div>
                </div>
            </div>
            <!-- 电影区 -->
            <div class="main_cont">
                <!-- 内容头部标题 -->
                <div class="infotitle">
                    <div class="infotitle_left"><img src="./img/classification/movie_logo.png" alt=""><span>热门搜索</span></div>
                    <div class="infotitle_right">
                        <a href="#">
                        <span>更多</span>
                        <!-- 右箭头 -->
                        <i class="iconfont icon-youjiantou_huaban right_icon"></i>
                        </a>
                </div>
            </div>
            <!-- 内容图片区域 -->
                <div class="main_cont_list">
                        <div class="cont_lsit_box"><img src="./img/classification/movie_boy.png" alt=""></div>
                        <div class="cont_lsit_box"><img src="./img/classification/movie_man.png" alt=""></div>
                        <div class="cont_lsit_box"><img src="./img/classification/movie_boy.png" alt=""></div>
                        <div class="cont_lsit_box"><img src="./img/classification/movie_man.png" alt=""></div>
                </div>
            </div>
        </main>
            <!-- 底部导航栏 -->
            <footer>
                <div class="navb_list">
                    <div class="nav_box">
                        <p><a href="./index.html"><i class="iconfont icon-shouye3 shouye_icon"></i></a></p>
                        <p>首页</p>
                    </div>
                    <div class="nav_box">
                        <p><a href="./classification.html"><i class="iconfont icon-four-squares-full classification_icon"></i></a></p>
                        <p>分类</p>
                    </div>
                    <div class="nav_box">
                        <p><a href="./find.html"><i class="iconfont icon-21 find_icon"></i></a></p>
                        <p>发现</p>
                    </div>
                    <div class="nav_box">
                        <p><a href="./mine.html"><i class="iconfont icon-shouye_wodehui mine_icon"></i></a></p>
                        <p>我的</p>
                    </div>
               </div>
                </footer>
    </div>
</body>
</html>